<script setup lang="ts">
import { Microphone, Mute } from "@element-plus/icons-vue";
import { Arrayable } from "@vueuse/core";
import { ElSlider } from "element-plus";
import {
  onBeforeMount,
  onMounted,
  reactive,
  ref,
  toRefs,
  watchEffect,
} from "vue";
import { useRoute, useRouter } from "vue-router";

/**
 * 仓库
 */

/**
 * 路由对象
 */
const route = useRoute();
/**
 * 路由实例
 */
const router = useRouter();
//console.log('1-开始创建组件-setup')
/**
 * 数据部分
 */
const volumeValue = ref<number>(50);
const volumeValues = ref<number>(0);

const isMuted = ref<boolean>(false);
const data = reactive<any>({});
const props = withDefaults(defineProps(), {
  msg: "hello",
  title: () => ["one", "two"],
});
const emit = defineEmits(["changeVolume"]);

function toggle() {
  isMuted.value = !isMuted.value;
  isMuted.value
    ? (volumeValue.value = 0)
    : (volumeValue.value = volumeValues.value);
}

function changeVolume(event: Arrayable<number>) {
  console.log("evee", event);

  // volumeValues.value = +event
}

onBeforeMount(() => {
  //console.log('2.组件挂载页面之前执行----onBeforeMount')
});
onMounted(() => {
  //console.log('3.-组件挂载到页面之后执行-------onMounted')
  volumeValues.value = volumeValue.value;
});
watchEffect(() => {});
// 使用toRefs解构
// let { } = { ...toRefs(data) }
defineExpose({
  ...toRefs(data),
});
</script>
<template>
  <div class="volume-wrap">
    <ElSlider
      class="volume-slider"
      vertical
      height="40px"
      :show-tooltip="false"
      v-model="volumeValue"
      size="small"
      @change="changeVolume"
    />
    <el-icon class="muted-btn" @click="toggle">
      <Microphone v-if="!isMuted" />
      <Mute v-else />
    </el-icon>
    <!-- <span class="volume-slider">test</span> -->
  </div>
</template>
<style scoped lang="scss">
.volume-wrap {
  position: relative;
  display: flex;
  flex-direction: column;
  column-gap: 15px;
  align-items: center;

  .iconfont {
    font-size: 18px;
    color: #606266;
  }

  .volume-slider {
    // pointer-events: none;
    position: absolute;
    bottom: 0;
    width: 2px;
    height: 80px;
    opacity: 0;
  }

  :deep(.el-slider__runway) {
    width: 2px !important;
    margin: auto !important;
    background-color: #dadee5;
  }

  :deep(.el-slider__bar) {
    width: 2px !important;
    background-color: red;
  }

  :deep(.el-slider__button-wrapper) {
    display: none;
  }

  .muted-btn {
    cursor: pointer;
  }

  &:hover {
    .volume-slider {
      opacity: 1;
      // pointer-events: auto;
    }
  }
}
</style>
